<style scoped>
  .layout-con {
    height: 100%;
    width: 100%;
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }

  .title-top-center {
    text-align: center;

  }

  .title-top-right {
    float: right
  }

  .btn_tools {
    padding: 6px 10px 6px 10px;
    background: #eee;
    border-radius: 20px;
  }

  .ivu-cell-extra {
    color: #ed4014;
  }

  .con .ivu-card-body {
    background: #fff;
  }
</style>
<template>
  <Row type="flex" justify="center" align="top" class="code-row-bg">
    <Col id="indexPhone1" span="1" :style="phoneStyle?{background:'#ffffff',height:'50px',borderTop: '1px solid #cccccc'}:{background:'#3F88D5',height:'100vh'}">
      <NavLeft :selected="1" :avatar="avatar"></NavLeft>
    </Col>
    <Col id="indexPhone2" span="4" v-if="!phoneStyle">
      <NavMiddle :itemList="itemList"></NavMiddle>
    </Col>
    <Col id="indexPhone3" span="19" style="background:#f5f7f9;height:100vh;">
      <Layout>
        <Content :style="{padding: '0 16px 16px'}">
          <div class="indexBanner" v-if="phoneStyle">
            <span class="phoneBack" @click="backIndex"><Icon type="ios-arrow-back"/>返回</span>
            <span class="text">日成绩</span>
          </div>
          <Breadcrumb :style="{margin: '16px 0'}">
            <Row type="flex" justify="space-between">
              <Col span="9">
                <!--<Button type="text">年成绩</Button>-->
                <!--<Button type="text">月成绩</Button>-->
                <span class="pcBack" @click="backHistory" v-if="isQuestion" style="font-size: 14px;color: rgb(70, 76, 91);margin-right: 10px;cursor: pointer;"><Icon type="ios-arrow-back"/>返回</span>
                <Button type="primary" v-if="!phoneStyle">日成绩</Button>
                <DatePicker size="large" type="date" placeholder="选择日期"  :editable="false" :clearable="false"
                            :value="chooseDate" @on-change="dateChange" style="float:right;margin-right:10px;" v-if="phoneStyle"></DatePicker>
              </Col>
              <Col span="6" class="title-top-center"
                   style="font-size: 16px; font-weight: bold; color: rgb(70, 76, 91);text-align:center;line-height: 36px" v-if="!phoneStyle">
                班组详情
              </Col>
              <Col span="9" class="drop">
                <Dropdown trigger="click" style="float: right" @on-click="dropdownClick" id="dropdownList">
                  <a type="text" size="large" style="float:right" class="btn_tools">
                    <Icon type="ios-share-alt" size="20"></Icon>
                  </a>
                  <DropdownMenu slot="list">
                    <DropdownItem name="1">分享</DropdownItem>
                    <DropdownItem name="2">引用</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
                <a :href="'/item/parameter?id='+unit_id" type="text" size="large"
                   style="float:right;margin-right:10px;" class="btn_tools" v-if="isWechat">
                  <Icon type="ios-cog" size="20"></Icon>
                </a>
                <DatePicker size="large" type="date" placeholder="选择日期"  :editable="false" :clearable="false"
                           :value="chooseDate" @on-change="dateChange" style="float:right;margin-right:10px;" v-if="!phoneStyle"></DatePicker>
              </Col>
            </Row>

          </Breadcrumb>
          <Card id="titleCard" :bordered="true" dis-hover>
            <p slot="title" :class="{'gradualGreen':levelColor == 'A' && isWork,'gradualYellow':levelColor == 'B' && isWork,'gradualRed':levelColor == 'C' && isWork,'bgGray': !isWork}">
              {{isWork?itemInfo.department_name:'今日未开班'}}
            </p>
            <div style="">
              <Row class="detailContent" type="flex" span="24">
                <Col class="dc_con" span="12">
                  <div ref="echart" style="height:360px;"></div>
                </Col>
                <Col class="dc_con" span="12" style="background:#f9f9f9;display: flex;flex-direction: column;justify-content: center">
                  <div class="dcc_content" style="padding:20px;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between">
                    <div v-for="(item, index) in tjList" style="width: 48%">
                      <div class="dcc_cards" style="cursor: pointer;margin-top:20px">
                        <Card :bordered="false">
                          <div class="cards" @click="cardClick(item.type,itemInfo.dossier_id,item.statis_pid)">
                            <div class="cdLeft">
                              <span class="cl_top">{{ item.title }}</span>
                              <span v-if="item.title=='设备' && isWork" class="cl_down">{{ item.name }}<span
                                   :class="{'specialLabel bgGreen':levelColor == 'A','specialLabel bgYellow':levelColor == 'B','specialLabel bgRed':levelColor == 'C',}">{{ item.reach_rate }}{{ item.company }}</span></span>
                              <span v-else class="cl_down">{{ item.name }}<span :class="isWork?'cld_color':'cld_color colorGray'">{{ item.reach_rate }}{{ item.company }}</span></span>
                            </div>
                            <div class="cdright">
                              <Icon type="ios-arrow-forward"/>
                            </div>
                          </div>
                        </Card>
                      </div>
                    </div>
                  </div>
                </Col>
              </Row>
            </div>
          </Card>
          <div style="margin-top: 20px;max-height: 380px;overflow-y: auto">
            <quesDiv :quesDivData="problem_list" :isIndex="true" v-if="quesDivShow" @needChange="needChange"></quesDiv>
          </div>
          <quote :entryData="entryData" v-if="showQuote" @saveEntry="saveEntry"></quote>
        </Content>
      </Layout>
    </Col>
  </Row>
</template>
<script>
  import cookie from 'js-cookie';
  import NavLeft from '@/components/NavLeft';
  import NavMiddle from '@/components/NavMiddle';
  import quesDiv from '@/components/quesDiv'
  import quote from '../assembly/entryForQuote'

  export default {
    data() {
      return {
        chart: null,
        isCollapsed: false,
        itemList: [],
        itemInfo: [],
        tjList: [],
        problem_list: [],
        quesDivShow: false,
        unit_id: "",
        chooseQS: 0,
        avatar: "",
        leda_name_list: [{text: '成本', max: 100},
          {text: '质量', max: 100},
          {text: '设备', max: 100},
          {text: '现场', max: 100},
          {text: '安全', max: 100}],
        leda_value_list: [],
        chooseDate: cookie.get('chooseDate'),
        levelColor: '',
        phoneStyle: false,
        isWechat: false,
        showQuote: false,
        entryData: {},
        isWork: false,
        isQuestion: false,
      };
    },
    components: {NavLeft: NavLeft, NavMiddle: NavMiddle,quesDiv: quesDiv,quote: quote},
    watch: {
      $route (val) {
        let self = this
        self.getData()
      }
    },
    created() {
      let self = this
      window.document.title = 'SCS详情';
      this.getData();
      let dw = document.body.clientWidth
      if (dw < 820) {
        self.phoneStyle = true
      } else {
        self.phoneStyle = false
      }
      self.isWechat = !self.$twjsdes.isWechat()
      if (self.$route.query.isQuestion != undefined) {
        if (self.$route.query.isQuestion) {
          self.isQuestion = true
        }
      }
    },
    updated () {
      let self = this
      self.unit_id = localStorage.getItem('middleId');
    },
    methods: {
      getData() {
        var uid = cookie.get('uid');
        var token = cookie.get('token');
        var unit_id = localStorage.getItem('middleId');
        if (!unit_id) {
          this.$Message.warning('无参数不能访问');
          return;
          //store.dispatch('setLoginStatus', 0)
          //window.location.reload()
        }
        this.$Loading.start();
        var str = {
          unit_id: unit_id,
          ymd: this.chooseDate,
          status: this.chooseQS,
          loginType: cookie.get('loginType')
        };
        // console.log(str,'传递的参数')
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/detail', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          // console.log(res.data,'查询结果')
          if (res.status == -1 && res.data.backurl) {
            this.$Modal.warning({
              title: '提示',
              content: '请在企业微信授权登录后使用',
              onOk: () => {
                if (this.$twjsdes.isWechat() === true) {
                  window.location.href = res.data.backurl_oauth2
                } else {
                  window.location.href = res.data.backurl
                }
              }
            });

          } else if (res.status != 1) {
            this.$Message.error(res.msg);
          } else {
            // console.log(res.data)
            this.isWork = res.data.isWork == 1?true: false
            if (this.isWork) {
              localStorage.setItem('middleId', res.data.unit_id)
              this.itemList = res.data.item_all_list;
              this.itemInfo = res.data;
              this.tjList = res.data.list;
              this.problem_list = res.data.problem_list;
              this.quesDivShow =true;
              this.avatar = res.data.avatar;
              this.levelColor = res.data.score
              for (var i = 0; i < this.tjList.length; i++) {
                this.leda_value_list[i] = this.tjList[i].score;
                this.leda_name_list[i].text = this.tjList[i].title;
                this.leda_name_list[i].max = 5;
              }
              //console.log('888');
              // console.log(this.leda_value_list);
              this.initEchart();
            } else {
              this.tjList = [{
                title: '成本',
                name: '成本达成率',
                reach_rate: '暂无数据'
              },{
                title: '质量',
                name: '下线合格率',
                reach_rate: '暂无数据'
              },{
                title: '设备',
                name: '异常停机',
                reach_rate: '暂无数据'
              },{
                title: '现场',
                name: '现场检查',
                reach_rate: '暂无数据'
              },{
                title: '安全',
                name: '安全检查',
                reach_rate: '暂无数据'
              }]
              this.problem_list = res.data.problem_list;
              this.quesDivShow =true;
              this.avatar = res.data.avatar;
              localStorage.setItem('middleId', res.data.unit_id)
              this.itemList = res.data.item_all_list;
              this.itemInfo = res.data;
              this.initEchartNull()
            }
          }
        }).catch(function (error) {
          console.log(error);
          /**
           this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
           **/
          //console.log(error);
        });
      },
      initEchart() {
        this.chart = this.$echarts.init(this.$refs.echart);
        let color = ''
        switch (this.levelColor) {
          case 'A':
            color = '#56b44a'
            break
          case 'B':
            color = '#f2ca51'
            break
          case 'C':
            color = '#f15c60'
            break
        }
        let option = {
          title: {
            text: this.itemInfo.score + '级',
            subtext: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            x: 'center',
            data: ['开发部']
          },
          toolbox: {
            show: false,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          polar: [
            {
              indicator: this.leda_name_list,
              radius: 130
            }
          ],
          series: [
            {
              name: '生产统计数据',
              type: 'radar',
              symbol: 'none',
              itemStyle: {
                normal: {
                  color : color, // 拐点颜色
                  areaStyle: { //背景颜色
                    type: 'default',
                    color: color,
                    opacity: 1,
                  },
                  lineStyle: { //边线颜色
                    color: color
                  },
                }
              },
              data: [
                {
                  value: this.leda_value_list,
                  name: ''
                },
              ]
            }
          ]
        };

        //chart.setTheme('green');
        this.chart.setOption(option);

      },
      initEchartNull() {
        this.chart = this.$echarts.init(this.$refs.echart);
        let color = '#ffffff'
        let option = {
          title: {
            text: '暂无数据',
            subtext: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            x: 'center',
            data: ['开发部']
          },
          toolbox: {
            show: false,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          polar: [
            {
              indicator: this.leda_name_list,
              radius: 130
            }
          ],
          series: [
            {
              name: '生产统计数据',
              type: 'radar',
              symbol: 'none',
              itemStyle: {
                normal: {
                  color : color, // 拐点颜色
                  areaStyle: { //背景颜色
                    type: 'default',
                    color: color,
                    opacity: 1,
                  },
                  lineStyle: { //边线颜色
                    color: color
                  },
                }
              },
              data: [
                {
                  value: [0,0,0,0,0,0],
                  name: ''
                },
              ]
            }
          ]
        };

        //chart.setTheme('green');
        this.chart.setOption(option);

      },
      cardClick(index, dossier_id, pid) {
        let self = this
        var newindex = parseInt(index);
        switch (newindex) {
          case 1:
            this.$router.push({
              path: '/item/quota/cost',
              query: {id: this.$route.query.id, dossier_id: dossier_id, pid: pid,chooseDate: self.chooseDate}
            })
            break;
          case 2:
            this.$router.push({
              path: '/item/quota/quality',
              query: {id: this.$route.query.id, dossier_id: dossier_id, pid: pid,chooseDate: self.chooseDate}
            })
            break;
          case 3:
            this.$router.push({
              path: '/item/quota/equipment',
              query: {id: this.$route.query.id, dossier_id: dossier_id, pid: pid,chooseDate: self.chooseDate}
            })
            break;
          case 4:
            this.$router.push({
              path: '/item/quota/scene',
              query: {id: this.$route.query.id, dossier_id: dossier_id, pid: pid,chooseDate: self.chooseDate}
            })
            break;
          case 5:
            this.$router.push({
              path: '/item/quota/security',
              query: {id: this.$route.query.id, dossier_id: dossier_id, pid: pid,chooseDate: self.chooseDate}
            })
            break;
          case 6:
            this.$router.push({
              path: '/item/quota/morale',
              query: {id: this.$route.query.id, dossier_id: dossier_id, pid: pid,chooseDate: self.chooseDate}
            })
            break;
        }
      },
      dateChange(val) {
        let self = this
        self.chooseDate = val
        cookie.set('chooseDate',val)
        self.getData()
      },
      needChange(val) {
        this.chooseQS = val
        this.getData()
      },
      backIndex() {
        let self = this
        localStorage.setItem('middleId','999')
        self.chooseUnit = '999'
        self.$router.push('/?id=999')
      },
      backHistory() {
        let self = this
        history.go(-1)
      },
      dropdownClick(val) {
        let self = this
        switch (val) {
          case '1': //分享
            break;
          case '2': //引用
            self.showQuote = true
            self.entryData = {
              type: 2,
              unit_id: self.$route.query.id,
              card: {
                is_type: 2,
                route: self.$route.path,
                fullPath: self.$route.fullPath,
                query: self.$route.query,
                ymd: self.chooseDate
              },
            }
            break
        }
      },
      saveEntry() {
        let self = this
        self.showQuote = false
        self.entryData = {}
      },
    },
    beforeDestroy() {
      /**
       if (!this.chart) {
		  return
		}
       this.chart.dispose()
       this.chart = null
       **/
    },
    computed: {
      menuitemClasses: function () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    mounted() {
      if (cookie.get('isAdmin') == 0) {
        this.$router.push({
          path: '/item/staff/'
        })
      }
      this.$nextTick(() => {
        //this.initEchart();
      });
    }
  }
</script>
<style lang="less">
  #titleCard{
    .ivu-card-head{
      height: 50px;
      padding: 0;
      p{
        height: 100%;
        line-height: 50px;
        padding-left: 16px;
        color: #fff;
        font-size: 20px;
      }
    }
  }
  .dcc_cards{
    border: 1px solid #e5e5e5;
  }
  .cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .cdLeft {
      display: flex;
      flex-direction: column;
      .cl_top {
        font-size: 16px;
        color: #222222;
      }
      .cl_down {
        font-size: 16px;
        color: #666666;
        margin-top: 10px;
        .cld_color {
          color: #ffb11b;
          margin-left: 10px;
        }
        .cld_color2 {
          color: #56b44a;
          margin-left: 10px;
        }
      }
      .specialLabel {
        font-size: 16px;
        color: #666666;
        margin-top: 10px;
        color: #fff;
        font-size: 13px;
        padding: 2px 4px;
        margin-left: 2px;
      }
    }
    .cdright {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  .ivu-card-body {
    background: #fff !important;
  }
  .drop{
    #dropdownList{
      .ivu-select-dropdown{
        top: 85% !important;
        left: 76% !important;
      }
    }
  }
  /* 手机竖屏 */
  @media screen and (min-width: 0px) and (max-width: 820px) {
    #indexPhone1 {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 99;
      width: 100%;
      height: 50px !important;
    }
    #indexPhone2{
      display: none;
    }
    #indexPhone3{
      width: 100%;
      padding-bottom: 66px !important;
      box-sizing: border-box;
      overflow-y: auto;
      .ivu-layout-content{
        padding: 0 !important;
        .ivu-card-body{
          padding: 0 !important;
        }
      }
      .indexBanner{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        height: 44px;
        line-height: 44px;
        box-sizing: border-box;
        background: #fff;
        border-bottom: 1px solid #e5e5e5;
        .phoneBack {
          font-size: 14px;
          color: rgb(70, 76, 91);
          line-height: 44px;
          cursor: pointer;
          position: absolute;
          left: 8px;
          top: 0;
        }
        .text{
          font-size: 18px;
          color: #222222;
        }
      }
      .ivu-breadcrumb{
        margin: 8px 0 !important;
        padding: 0 8px !important;
      }
      .detailContent{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .dc_con{
          width: 100% !important;
          .dcc_content{
            padding: 8px !important;
            .dcc_cards{
              margin-top: 8px !important;
              .ivu-card{
                padding: 8px !important;
              }
            }
          }
        }
        .dc_con:first-child{
          padding: 8px !important;
          box-sizing: border-box;
          border-bottom: 1px solid #e5e5e5;
        }
      }
      .drop{
        #dropdownList{
          .ivu-select-dropdown{
            left: 15% !important;
          }
        }
      }
    }
  }
</style>
